<template>
  <div class="bar">
    <!-- 进度条 -->
    <div class="bar_inner" ref="bar" @mousedown="barMousedown">
      <div class="bar_inner_progress" :style="{ width: left + 'px' }"></div>
      <!-- 滑块 -->
      <div
        class="bar_inner_slider"
        :style="{ left: left + 'px' }"
        @mousedown="mousedown"
        @touchmove="touchmove"
      >
        <!-- 百分比 -->
        <div class="bar_inner_slider_rate">{{ rate }}%</div>
      </div>
    </div>
    <!-- 标注 -->
    <div class="bar_desc l-f l-row-sb">
      <p class="bar_desc_item">0</p>
      <p class="bar_desc_item">{{ $t("aiTrading.max") }}</p>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";

const emits = defineEmits(['change'])

const bar = ref(0);
const left = ref(0);
const isChange = ref(true)

onMounted(() => {
  window.addEventListener('resize', () => {
    // 根据进度百分比计算left
    left.value = (bar.value.clientWidth * rate.value) / 100
  })
})

const rate = computed(() => {
  if (bar.value.clientWidth) {
    return Math.ceil((left.value / bar.value.clientWidth) * 100);
  } else {
    return 0;
  }
});

watch(
  () => rate.value,
  (val) => {
    if(!isChange.value) return
    emits('change',val)
  }
)

// 进度条点击事件
const barMousedown = (e) => {
  // 获取滑块的宽度（可移动区域）
  let w = bar.value.clientWidth;
  // 获取鼠标的位置
  let x = e.pageX - bar.value.getBoundingClientRect().left;
  // 判断是否超出范围
  x = x < w && x > 0 ? x : x > w ? w : 0;
  left.value = x;
   isChange.value = true
};

// 点击后添加事件
const mousedown = () => {
  window.addEventListener("mousemove", handleChange);
  window.addEventListener("mouseup", mouseup);
};
// pc移动滑块
const handleChange = (e) => {
  if (!bar.value) return;
  onMove(e.pageX)
};
// 鼠标放开后移除事件
const mouseup = () => {
  window.removeEventListener("mousemove", handleChange);
  window.removeEventListener("mouseup", mouseup);
};
// h5移动滑块
const touchmove = (e) => {
  onMove(e.touches[0].pageX)
}

// 移动逻辑处理
const onMove = (pageX) => {
  isChange.value = true
  // 获取滑块的宽度（可移动区域）
  let w = bar.value.clientWidth;
  // 获取鼠标的位置
  let x = pageX - bar.value.getBoundingClientRect().left;
  // 判断是否超出范围
  x = x < w && x > 0 ? x : x > w ? w : 0;
  left.value = x;
}

// 设置进度条的百分比
const setProgress = (val) => {
  if(val >= 1) {
    val = 1
  }else
  if(val <= 0) {
    val = 0
  }
  isChange.value = false
  left.value = Math.ceil(val * bar.value.clientWidth)
}

defineExpose({
  setProgress
})

</script>
<style scoped lang="scss">
.bar {
  padding: 20px 0;
  box-sizing: border-box;
  &_inner {
    height: 4px;
    background: #1f6bff1a;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    width: 100%;
    cursor: pointer;
    position: relative;
    &_progress {
      background-color: #d3b25b;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 0;
    }
    &_slider {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
      box-sizing: border-box;
      width: 12px;
      height: 12px;
      border: 2px solid #d3b25b;
      background-color: #000000;
      border-radius: 50%;
      cursor: grab;
      &_rate {
        font-size: 14px;
        color: #ffffff;
        position: absolute;
        top: -22px;
        left: -5px;
        font-size: 12px;
        font-weight: 700;
      }
    }
  }
  &_desc {
    &_item {
      color: #b8b8b8;
      font-weight: 500;
      font-size: 10px;
    }
  }
}
</style>